import React from 'react';
// 引用ant框架组件
import {Row, Col, Menu, Icon, Tabs, message, Form, Input, Button, Modal} from 'antd';
import 'whatwg-fetch'
import {Link} from 'react-router';

const FormItem = Form.Item;
const TabPane = Tabs.TabPane;

class PCHeader extends React.Component {
    constructor() {
        super();
        // state init
        this.state = {
            // 默认选中的menu
            current: "top",
            // 模态框默认关闭
            modalVisible: false,
            // 控制登录 / 注册 接口
            action: 'login',
            // 是否登录
            hasLogined: false,
            // 用户名
            userNickName: '加载中...',
            // 用户id
            userid: ''
        }
    };

    componentWillMount() {
        if (localStorage.userid && localStorage.userid != '') {
            this.setState({hasLogined: true});
            this.setState({userNickName: localStorage.userNickName, userid: localStorage.userid});
        }
    };

    // 模态框显示与隐藏
    setModalVisible(value,) {
        this.setState({
            modalVisible: value
        });
    };

    // 导航菜单点击处理
    handleClick(e) {
        this.setState({
            current: e.key
        })
    };

    //页面开始向 API 进行提交数据
    handleSubmit(e) {
        // 阻止默认事件
        e.preventDefault();
        var myFetchOptions = {
            method: 'GET'
        };
        var formData = this.props.form.getFieldsValue();
        console.log(formData);
        fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=" + this.state.action
            + "&username=" + formData.userName + "&password=" + formData.password
            + "&r_userName=" + formData.r_userName + "&r_password="
            + formData.r_password + "&r_confirmPassword="
            + formData.r_confirmPassword, myFetchOptions)
            .then(response => response.json())
            .then(json => {
                this.setState({userNickName: json.NickUserName, userid: json.UserId});
                localStorage.setItem("userid", json.UserId);
                localStorage.setItem("userNickName", json.NickUserName);
            });
        if (this.state.action == "login") {
            this.setState({hasLogined: true});
        }
        message.success("请求成功！");
        this.setModalVisible(false);
    };

    // 登录 / 注册 tab 切换
    callback(key) {
        if (key == 1) {
            this.setState({action: 'login'});
        } else if (key == 2) {
            this.setState({action: 'register'});
        }
    };

    // 退出登录
    logout(e) {
        e.preventDefault();
        localStorage.removeItem('userid');
        localStorage.removeItem('userNickName');
        this.setState({hasLogined: false});
    };

    render() {
        // 全局消息提示配置
        message.config({
            // 距离顶部位置
            top: 500,
            // 延时
            duration: 2,
            // 最大消息显示数量 超过的按时间顺序隐藏
            maxCount: 3,
        });
        const {getFieldProps} = this.props.form;
        // 登录状态
        let userInfo =
            <li className={'header-right'}>
                <Button type="primary" size={'small'} htmlType="button">{this.state.userNickName}</Button>
                &nbsp;&nbsp;
                <Link to={`/usercenter`}>
                    <Button type="ghost" size={'small'} htmlType="button">个人中心</Button>
                </Link>
                &nbsp;&nbsp;
                <Button type="dashed"
                        size={'small'}
                        htmlType="button"
                        onClick={this.logout.bind(this)}>退出</Button>
            </li>
        // 未登录状态
        let logAndReg =
            <Button type="primary"
                    icon="user"
                    className={'header-right'}
                    onClick={() => this.setModalVisible(true)}
                    htmlType="button">登录 / 注册</Button>
        // 登录 >> 显示信息,未登录 >> 登录 / 注册
        const userShow = this.state.hasLogined ? userInfo : logAndReg
        return (
            <header>

                <Modal title="用户中心"
                       wrapClassName="vertical-center-modal"
                       visible={this.state.modalVisible}
                       onCancel={() => this.setModalVisible(false)}
                       onOk={() => this.setModalVisible(false)}
                       footer={null}>
                    <Tabs type="card" onChange={this.callback.bind(this)}>
                        <TabPane tab="登录" key="1">
                            <Form horizontal onSubmit={this.handleSubmit.bind(this)}>
                                <FormItem label="账户">
                                    <Input placeholder="请输入您的账号" {...getFieldProps('userName')}/>
                                </FormItem>
                                <FormItem label="密码">
                                    <Input type="password" placeholder="请输入您的密码" {...getFieldProps('password')}/>
                                </FormItem>
                                <Button type="primary" htmlType="submit">登录</Button>
                            </Form>
                        </TabPane>
                        <TabPane tab="注册" key="2">
                            <Form horizontal onSubmit={this.handleSubmit.bind(this)}>
                                <FormItem label="账户">
                                    <Input placeholder="请输入您的账号" {...getFieldProps('r_userName')}/>
                                </FormItem>
                                <FormItem label="密码">
                                    <Input type="password" placeholder="请输入您的密码" {...getFieldProps('r_password')}/>
                                </FormItem>
                                <FormItem label="确认密码">
                                    <Input type="password"
                                           placeholder="请再次输入您的密码" {...getFieldProps('r_confirmPassword')}/>
                                </FormItem>
                                <Button type="primary" htmlType="submit">注册</Button>
                            </Form>
                        </TabPane>
                    </Tabs>
                </Modal>
                <Row className={'header-row'}>
                    <Col span={2}></Col>
                    <Col span={4}>
                        <a href="/" className="logo">
                            <img src="./src/images/plogo.png" alt="logo"/>
                            <span>ReactNews</span>
                        </a>
                    </Col>
                    <Col span={16}>
                        <Menu className={'header-menu'}
                              onClick={this.handleClick.bind(this)}
                              mode="horizontal"
                              selectedKeys={[this.state.current]}>
                            <Menu.Item key="top">
                                <Icon type="home"/>首页
                            </Menu.Item>
                            <Menu.Item key="shehui">
                                <Icon type="appstore"/>社会
                            </Menu.Item>
                            <Menu.Item key="guonei">
                                <Icon type="appstore"/>国内
                            </Menu.Item>
                            <Menu.Item key="guoji">
                                <Icon type="appstore"/>国际
                            </Menu.Item>
                            <Menu.Item key="yule">
                                <Icon type="appstore"/>娱乐
                            </Menu.Item>
                            <Menu.Item key="tiyu">
                                <Icon type="appstore"/>体育
                            </Menu.Item>
                            <Menu.Item key="keji">
                                <Icon type="appstore"/>科技
                            </Menu.Item>
                            <Menu.Item key="shishang">
                                <Icon type="appstore"/>时尚
                            </Menu.Item>
                            {userShow}
                        </Menu>
                    </Col>
                    <Col span={2}></Col>
                </Row>
            </header>
        );
    };
}

export default PCHeader = Form.create({})(PCHeader);
